<template>
	<view class="wrapper">
		<!-- 所属房源 -->
		<u-popup :show="showOwnerHouse" :round="40" mode="center">
			需要引入插件
		</u-popup>
		<!-- 性别选择 -->
		<u-action-sheet :show="showSex" :actions="actionsSex" title="请选择性别" 
			@close="showSex = false" @select="(e)=>userInfo.phone5=e.name">
		</u-action-sheet>
		<!-- 证件类型 -->
		<u-action-sheet :show="showCard" :actions="actionsCard" title="请选择证件类型" 
			@close="showCard = false" @select="(e)=>userInfo.phone6=e.name">
		</u-action-sheet>
		
		<!-- 证件类型 -->
		<u-action-sheet :show="showDate" :actions="actionsDate" title="请选择证件类型" 
			@close="showDate = false" @select="(e)=>userInfo.phone10=e.name">
		</u-action-sheet>
		<!-- 表单 -->
		<view class="form_wrapper">
			<u-form labelPosition="top" :model="userInfo" ref="uForm" :rules="rules" labelWidth="200">
				<u-cell @click="ownerHouseClick">
					<u--text slot="title" text="所属房源" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请选择" v-model.trim="userInfo.phone1" border="none" inputAlign="right"
							readonly>
						</u-input>
					</u-form-item>
					<u-icon slot="right-icon" name="arrow-right"></u-icon>
				</u-cell>

				<u-cell>
					<u--text slot="title" text="出租类型" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<!-- <u-input placeholder="请输入" v-model.trim="userInfo.phone1" border="none" inputAlign="right"> -->
						<view class="u-page__tag-item" v-for="(item, index) in ['合租','整租']" :key="index">
							<u-tag :text="item" :plain="!(item===userInfo.phone2)" type="warning" :name="item"
								@click="(item)=>userInfo.phone2 =item">
							</u-tag>
						</view>
						</u-input>
					</u-form-item>
				</u-cell>

				<u-cell>
					<u--text slot="title" text="手机号码" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请输入" number v-model.trim="userInfo.phone3" border="none"
							inputAlign="right">
						</u-input>
					</u-form-item>
				</u-cell>
				<u-cell>
					<u--text slot="title" text="租客姓名" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请输入" v-model.trim="userInfo.phone4" border="none" inputAlign="right">
						</u-input>
					</u-form-item>
				</u-cell>
				<u-cell @click="showSex = true">
					<u--text slot="title" text="租客性别" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u--input v-model="userInfo.phone5" readonly border="none" inputAlign="right"
							placeholder="请选择性别"></u--input>
					</u-form-item>
					<u-icon slot="right-icon" name="arrow-right"></u-icon>
				</u-cell>
				<u-cell @click="showCard = true">
					<u--text slot="title" text="证件类型" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请选择" v-model.trim="userInfo.phone6" border="none" readonly inputAlign="right">
						</u-input>
					</u-form-item>
					<u-icon slot="right-icon" name="arrow-right"></u-icon>
				</u-cell>
				<u-cell>
					<u--text slot="title" text="证件号码" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请输入"  v-model.trim="userInfo.phone7" border="none"
							inputAlign="right">
						</u-input>
					</u-form-item>
				</u-cell>
				<u-cell>
					<u--text slot="title" text="证件照片(选填)" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请输入" v-model.trim="userInfo.phone8" border="none" inputAlign="right">
						</u-input>
					</u-form-item>
					<u-icon slot="right-icon" name="arrow-right"></u-icon>
				</u-cell>
				<u-cell>
					<u--text slot="title" text="入住人数" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-number-box  v-model.trim="userInfo.phone9" :step="1" :min="1" :max="100" integer></u-number-box>
					</u-form-item>
				</u-cell>
				<u-cell @click="showDate = true">
					<u--text slot="title" text="租期" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请选择" v-model.trim="userInfo.phone10" border="none" inputAlign="right"
							readonly>
						</u-input>
					</u-form-item>
					<u-icon slot="right-icon" name="arrow-right"></u-icon>
				</u-cell>
				<u-cell>
					<u--text slot="title" text="租金" size="14"></u--text>
					<u-form-item slot="value" prop="phone1" label="" :borderBottom="false">
						<u-input placeholder="请输入" v-model.trim="userInfo.phone1" border="none" inputAlign="right">
							<template slot="suffix">元/月</template>
						</u-input>
					</u-form-item>
				</u-cell>


			</u-form>
			<view class="button_box">
				<u-button @click="submit" :custom-style="btnStyle" ripple>提交审核</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					marginTop: '20px',
					color: '#fff',
					background: 'rgb(240, 90, 35)',
					height: '40px'
				},
				rules: {

				},
				userInfo: {
					phone1: '',
					phone2: '',
					phone3: '',
					phone4: '',
					phone5: '',
					phone6: '',
					phone7: '',
				},
				showOwnerHouse: false,
				showSex: false,
				actionsSex: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				showCard:false,
				actionsCard: [{
						name: '身份证',
					},
					{
						name: '驾驶证',
					},
				],
				showDate:false,
				actionsDate: [{
						name: '1个月',
					},
					{
						name: '3个月',
					},
					{
						name: '6个月',
					},					
					{
						name: '12个月',
					},
				],
			}
		},
		methods: {
			ownerHouseClick() {
				this.showOwnerHouse = true
			},
			async submit(){
				console.log('$$', this.userInfo)
				await this.$refs.uForm.validate()
			}
		},
	}
</script>

<style scoped lang="scss">
	.wrapper {
		padding: 20rpx 0rpx;

		.form_wrapper {
			font-size: 28rpx;

			.button_box {
				margin: 0 auto;
				width: 600rpx;
			}
		}

		.top {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		/deep/ .u-form-item__body {
			padding: 5rpx;
		}

	}
</style>